<template>
    <div class="main">
  <div class="tutor-detail" style="margin-bottom:0px;">
      <!--<a class="btn-open" href="javascript:;">开通分答</a>-->
      <div class="tutor">

          <div class="avatar" style=" float:left;position:relative;width:2.65rem;height:2.65rem;border-radius:50%;display:block;">
            <img style="position:relative;width:2.65rem;height:2.65rem;border-radius:50%;display:inline-block;" class="avatarImg" src="/fengshui/static/pic/icon/feedback_1.png">
            <span></span>
        </div>
        <div class="title">期待您的反馈</div>
      </div>
      <!--<div class="title"></div>-->
      <div class="introduction"></div>
      <div class="profile">
        <p class="highlight"></p>
        <p>欢迎提出您在使用过程中遇到的问题或宝贵建议（400字以内），感谢您的支持。</p>
      </div>
    </div>
    
    <div>

        <customer-input limit="400" rows='4' v-model="value" title="反馈区域"></customer-input>
            <div style="width: 100%;text-align: center;">
      <button @click="submit" class="submit">提交问题反馈</button>
    </div>
    </div>
<customer-footer></customer-footer>
    </div>

</template>
<script>
    import CustomerInput from '../components/CustomerInput'
    export default {
        components: {
            CustomerInput
        },
        data() {
            return {
                value: ""
            }
        },
        methods: {
            submit: function() {
                let vm = this;
                if (vm.value.length == 0) {
                    vm.$vux.alert.show({
                        title: '提示',
                        content: "内容不能为空"
                    })
                    return
                }
                let params = {
                    content: vm.value
                }
                vm.$vux.loading.show({
                    text: '上传反馈中..'
                })

                vm.$http.jsonp(vm.url.acid + "&do=feedback", {
                    params: params
                }).then(response => {
                    vm.$vux.loading.hide()
                    let resJson = response.body;
                    if (resJson.status == "success") {
                        vm.$vux.alert.show({
                            title: '提示',
                            content: "反馈提交成功~谢谢您~"
                        })

                    } else {
                        vm.$vux.alert.show({
                            title: '提示',
                            content: resJson.msg
                        })
                    }
                }, response => {
                    this.$vux.loading.hide();
                    this.$vux.alert.show({
                        title: '提示',
                        content: "连接服务器失败!!!"
                    })
                });
            }
        }
    }
</script>

<style scoped>
    a,
    img {
        -webkit-touch-callout: none;
        text-decoration: none;
    }
    
    .me-items {
        margin: .75rem 0 0;
    }
    
    li,
    ol,
    ul {
        list-style: none;
    }
    
    .tutor-detail {
        padding: .9rem;
        padding-bottom: .625rem;
        background: #fff;
        position: relative;
    }
    
    .tutor-detail .tutor .avatar {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .tutor-detail .profile p {
        text-align: left;
        font-size: .7rem;
        color: #999;
        line-height: 1.2rem;
    }
    
    .tutor-detail .tutor .title {
        float: left;
        font-size: 1rem;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 2.65;
        padding-left: .5rem;
    }
    
    .tutor-detail .tutor {
        /*padding: .25rem 4.5rem 0 3.25rem;*/
        position: relative;
        height: 2.65rem;
        line-height: 1.5;
    }
    
    .tutor-detail .profile {
        margin-top: .5rem;
    }
    
    .submit {
        width: 80%;
        border-radius: 100px;
        border: none;
        padding: .4rem;
        color: white;
        background-color: dodgerblue;
        margin: 1rem auto;
    }
</style>